<template>
  <div class="less_topic">
    <div class="topic_top">

    </div>
    <div class="topic_con">
      <div class="topic_con_scroll">
        <div class="topic_item" v-for="(v,index) in topicList" :key="index">
          <div class="topic_item_t">
            <p>Q{{index +1}}</p>
            <img src="../../assets/image/lesson/answerT.png" alt="">
            <p style="color: #373737">{{v.tit}}</p>
          </div>
		  <div class="topic_item_chose">
			  <div v-for="(v,n) in 5" @click="choseitem(n)" 
			  :class="{topic_item_is_chose:n==choseitemFlag}"
			  >单一
			  <!-- <div class="ch_box"></div> -->
			  </div>
		  </div>
		  <div class="topic_item_tips">再概括</div>
          <div class="topic_item_p">
            <div v-for="(l,i) in v.list" :class="['item_p_sel', currItemel === i?'curr_item_p_sel': '' ]" @click="changeItemel(i)">
              <img v-show="currItemel === i" class="target" src="../../assets/image/lesson/target.png" alt="">
              {{l}}</div>
          </div>
        </div>

      </div>
<!--      提交-->
    </div>
    <div class="topic_answer" @click="toAnswerList">
      <img src="../../assets/image/lesson/answer.png" alt="" style="width: 100%; height: 100%;">
    </div>
	<div class="kefu_box">
		<div class="countdown">
			<div :style="{width:countNum}"></div>
		</div>
	</div>
  </div>
</template>

<script>
export default {
  name: "lessTopic",
  data(){
    return {
		countNum:'',
		timeNo:'',
		type:null,
		currItemel: -1,
		countDownTime: 0,
		// 试题列表
		topicList: [
		  {tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list: 
		  ['A.数量','B.数字','C.个数','D.次数']},
		  {tit:'少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了', list:
		  ['A.数量','B.数字','C.个数','D.次数']}
		],
		choseitemFlag:-1
    }
  },
  mounted() {
	  this.type=parseInt(this.$route.query.class)
  	this.countDown(5000)
	// this.$emit("closeloading")
  },
  methods:{
    toAnswerList(){
      this.$router.push({path: '/answerList'})
    },
	choseitem(n){
		this.choseitemFlag=n
	},
	changeItemel(index){
	  this.currItemel = index
	},
	countDown(time){
		var second=parseFloat(time/1000)
		var average=parseFloat(100/second)
		console.log(second)
		console.log(average)
		
		var nowStep=0
		this.timeNo=setInterval(()=>{
			if(nowStep==100){
				clearInterval(this.timeNo)
				return
			}
			if(100-nowStep<=average&&nowStep+average>=100){
				nowStep=100
			}else{
				nowStep+=average
			}
			this.countNum=nowStep+"%"
		},1000)
	}
  }
}
</script>

<style lang="less" scoped>
.less_topic {
  position: relative;
  height: 100vh;
  font-size: .16rem;
  color: #fff;
  background: url("../../assets/image/lesson/lesback.png") no-repeat;
  background-size: 100% 100%;

  .topic_top {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3.66rem;
    height: 2.06rem;
    background: url("../../assets/image/lesson/breadth.png") no-repeat;
    background-size: 100% 100%;
  }



  .topic_answer{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1.93rem;
    height: 0.7rem;
    cursor:pointer;
  }
}
.kefu_box{
	position: fixed;
	bottom: 1.24rem;
	right: 1.7rem;
	.countdown{
		width: 2.49rem;
		height: 0.62rem;
		position: absolute;
		bottom: 0;
		right: 0;
		background-image: url(../../assets/image/lesson/qujishidi.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		&>div{
			position: absolute;
			left: 0;
			top: 0;
			height: 0.62rem;
			background-image: url(../../assets/image/lesson/qujishi.png);
			background-size: 2.49rem 0.62rem;
			background-repeat: no-repeat;
		}
	}
}
  .topic_con{
    padding: 0.9rem 1.3rem;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%,-50%);
    width: 10.38rem;
    height: 6.3rem;
    color: #5175df;
    box-sizing: border-box;
    background: url("../../assets/image/lesson/border.png") no-repeat;
    background-size: 100% 100%;
    .topic_con_scroll{
      overflow-y: scroll;
      height: 100%;
      //火狐浏览器隐藏滚动条
      & {
        scrollbar-color: #9eb0e6 #f7f7f9;
        scrollbar-width: thin;
        scrollbar-track-color: transparent;
        -ms-scrollbar-track-color: transparent;
      }
      /* 设置滚动条的样式 谷歌  */
      &::-webkit-scrollbar {
        width:12px;
      }
      /* 滚动槽 */
      &::-webkit-scrollbar-track {
        -webkit-box-shadow:inset006pxrgba(223, 224, 229);
        border-radius:10px;
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius:10px;
        background:rgba(158, 176, 230);
        -webkit-box-shadow:inset006pxrgba(158, 176, 230);
      }
      &::-webkit-scrollbar-thumb:window-inactive {
        background:rgba(229, 226, 217);
      }
      .topic_item{
        font-size: .21rem;
        .topic_item_t{
          display: flex;
          &>span{
            color: #2175F4;
          }
          &>img{
            margin: 0 .4rem;
            width: 0.75rem;
            height: 0.75rem;
          }
          &>p {
          }
        }
		.topic_item_chose{
			margin-top: 0.07rem;
			padding-left: 1.8rem;
			overflow: hidden;
			&>div{
				// width: 0.92rem;
				height: 0.52rem;
				padding: 0 0.24rem;
				line-height: 0.44rem;
				font-size: 0.21rem;
				box-sizing: border-box;
				float: left;
				color: #333333;
				border: 0.04rem solid #F3F2EF;
				// background: #5B7CE8;
				border-radius: 0.26rem;
				cursor: pointer;
				margin-right: 0.14rem;
				position: relative;
				&>.ch_box{
					width: 0.34rem;
					height: 0.34rem;
					position: absolute;
					right: 0;
					bottom: -0.06rem;
					background-size: 100%;
					background-repeat: no-repeat;
					animation-name: ch;
					animation-duration: 2s;
					animation-iteration-count:infinite;
				}
				@keyframes ch {
				   0% {
					   background-image: url(../../assets/image/lesson/xh1.png);}
				   25% {background-image: url(../../assets/image/lesson/xh2.png);}
				   50% {background-image: url(../../assets/image/lesson/xh3.png);}
				   75% {background-image: url(../../assets/image/lesson/xh4.png);}
				   100% {
					   background-image: url(../../assets/image/lesson/xh5.png);}
				}
			}
			&>div:hover{
				background: #D2DFF6;
				color: #395DD2;
				border: 0.04rem solid #D2DFF6;
			}
			.topic_item_is_chose{
				background: #5B7CE8;
				color: #FFFFFF;
				border: 0.04rem solid #5B7CE8;
			}
		}
		.topic_item_tips{
			font-size: 0.21rem;
			color: #373737;
			padding-left: 1.85rem;
			margin: 0.34rem 0 0.28rem;
		}
        .topic_item_p{
          display: flex;
          flex-wrap: wrap;
          margin: .3rem 0;
		  padding-left: 1.5rem;
          .item_p_sel{
            position: relative;
            margin: .13rem .4rem;
            padding: 0 .6rem 0 .6rem;
            height: .6rem;
            line-height: .6rem;
            text-align: center;
            color: #333;
            font-size: 0.18rem;
            border: 1px solid #c8c7c4;
            border-radius: 45px;
            cursor: pointer;
            .target{
              position: absolute;
              top: 50%;
              left: .2rem;
              transform: translateY(-60%);
              width: 0.35rem;
              height: 0.38rem;
            }
          }
          .curr_item_p_sel{
            background: #e8edf3;
          }
        }
      }
      .next_group{
        float: right;
        width: 1.68rem;
        height: 0.66rem;
        cursor: pointer;
        &>img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .topic_progress{
      position: absolute;
      top: -0.4rem;
      left: 0;
      width: 3.8rem;
      height: 1.2rem;
      background: url("../../assets/image/lesson/progress.png");
      background-size: 100% 100%;
      .progress_list{
        display: flex;
        justify-content: space-around;
        position: absolute;
        right: .42rem;
        bottom: .32rem;
        width: 1.96rem;
        height: 0.15rem;
        background: url("../../assets/image/lesson/protime.png");
        background-size: 100% 100%;
        .pro_mask{
          width: 0;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          background: #7e84c8;
          &::before{
            position: absolute;
            left: 0;
            top: -0.2em;
            content: '';
            width: .2rem;
            height: .2rem;
            background: pink;
            border-radius: 50%;
          }
        }
      }
    }
    // 提交
    .submit{
      position: absolute;
      left: 50%;
      bottom: -0.3rem;
      transform: translateX(-50%);
      width: 2rem;
      height: 0.8rem;
      background: url("../../assets/image/lesson/submit.png") no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
